<template>
  <div>
    <el-row :gutter="9">
      <el-form
        ref="message"
        :model="message"
        :rules="rules"
        size="medium"
        label-width="100px"
        label-position="left"
        style="margin-left: 20px">
        <el-col :span="24">
          <el-form-item :prop="message.type===2 ? 'userId' : ''" label="用户姓名">
            <el-select
              v-model="message.userId"
              :style="{width: '25%'}"
              :disabled="message.type===2"
              placeholder="请选择用户id"
              filterable
              clearable>
              <el-option v-for="(user,key) in userList" :key="key" :value="user.id" :label="user.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="消息标题" prop="title">
            <el-input v-model="message.title" :style="{width: '25%'}" placeholder="请输入消息标题" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="消息内容" prop="content">
            <el-input
              v-model="message.content"
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '25%'}"
              type="textarea"
              placeholder="请输入消息内容"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型选择" prop="type">
            <el-select v-model="message.type" :style="{width: '25%'}" placeholder="请选择类型" clearable>
              <el-option
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"/>
            </el-select>
          </el-form-item>
        </el-col>
        <br>
        <br>
        <el-col :span="24">
          <el-form-item label="是否已读" prop="status">
            <el-switch
              v-model="message.status"
              :active-value="1"
              :inactive-value="0"
              :disabled="message.type===2"
              active-text="已读"
              inactive-text="未读"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="addOrUpdate">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import message from '../../api/message'
import user from '../../api/user'

export default {
  data() {
    return {
      message: {
        userName: '',
        title: undefined,
        content: undefined,
        type: 0,
        status: 0
      },
      rules: {
        userName: [{
          required: true,
          message: '请选择用户姓名',
          trigger: 'change'
        }],
        title: [{
          required: true,
          message: '请输入消息标题',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }],
        content: []
      },
      typeOptions: [{
        'label': '点赞',
        'value': 0
      }, {
        'label': '回复',
        'value': 1
      }, {
        'label': '系统通知',
        'value': 2
      }],
      userList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.listUser()
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.selectMessageById(id)
    }
  },
  mounted() {
  },
  methods: {
    resetForm() {
      this.$refs['message'].resetFields()
    },
    listUser() {
      user.listAll().then(result => {
        this.userList = result.data
        console.log(this.userList)
      })
    },
    addOrUpdate() {
      this.$refs['message'].validate((valid) => {
        if (valid) {
          if (this.message.id != null) {
            this.updateMessage()
          } else {
            this.addMessage()
          }
        } else {
          console.log('错误的上传!!')
          return false
        }
      })
    },
    updateMessage() {
      console.log('update')
      message.update(this.message).then(res => {
        this.$message.success(res.message)
        this.$router.push({ path: '/message/list' })
      })
    },
    addMessage() {
      console.log('save')
      message.save(this.message).then(res => {
        this.$message.success(res.message)
        this.$router.push({ path: '/message/list' })
      })
    },
    selectMessageById(id) {
      message.selectMessageById(id).then(res => {
        this.message = res.data
      })
    }
  }
}

</script>
<style>
</style>

